<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html{
            font-size: 20px;
        }
        div{
            font-size: 2rem;/* 20px*2 */
        }
        p{
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>刚子加油</div>
    <p>
            刚子加油
    </p>
</body>
</html>
<!-- 
    常见的网页单位
        - px 像素 网页中最常用的单位
        - em 相对于父级元素的单位 
        - pt 磅 打印机设备上使用
        - % 百分比 宽高自适应 
        - deg 角度 css3 2/3d 
    
    移动端重要的单位:rem  相对于html根元素进行计算的
    移动端布局思路:
        - rem单位是相对于html根元素进行计算的
        - 每个移动端(终端设备)宽高不一样，根元素html也是不一样的
        - 网页中有一个盒子为2rem，然后改变每一个移动端的时候
        - 将每个移动端的html根元素设置成不同的font-size的大小
        - 2rem rem计算是针对于每一个html
    
    了解的一些相关概念
        - dpi 安卓手机
        - ppi 苹果手机 ppi值越高手机屏幕越清晰
        - Retina iphone4

    计算公式   
        - 设备像素(物理像素) ui设计图
        - 逻辑像素 前端设置的css像素
        - 设备像素比
    =>   设备像素比(dpr) = 物理像素 / 逻辑像素
        - 物理像素就是ui设计师给的Ui设计图 1440px 1920px(工作中最常用的设计图宽度)
        - 逻辑像素是我们需要设置
    
    设备像素比
        - ui设计图宽度为640px,dpr考虑为2
        - ui设计图宽度为750px,dpr考虑为2
        - ui设计图宽度为1080px,dpr考虑为3
 -->